<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$common.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">收款二维码(提现转账)</view>
		</view>
		<view class="mod mod-wbg">
			<view class="con">
				<view class="uploadWrap">
					<view class="upload" @click="uploadImg">
						<block v-if="wxIncomeQrcodeUrl">
							<image :src="wxIncomeQrcodeUrl" mode="aspectFill"></image>
						</block>
						<block v-else><text>点击上传</text></block>
					</view>
				</view>
			</view>
			<view class="tit" style="text-align: center;">点击收款二维码上传</view>
			<view class="addForm">
				<view class="form">
					<view class="item">
						<view class="key">手机号</view>
						<view class="value"><text>{{phone}}</text></view>
					</view>
					<view class="item">
						<view class="key">图片验证</view>
						<view class="value">
							<input type="text" v-model="picCode" placeholder="请输入图片验证码" />
							<image :src="imgUrl" class="imgCaptcha" mode="aspectFit" @click="imgCaptcha"></image>
						</view>
					</view>
					<view class="item">
						<view class="key">短信验证</view>
						<view class="value">
							<input type="number" v-model="phoneValid" placeholder="请输入手机验证码" maxlength="6"/>
							<text :class="'btn-getCaptcha '+(isSend?'disabled':'')" @click="getCaptcha">{{captchaText}}</text>
						</view>
					</view>
				</view>
				<view class="buttonArea">
					<view class="btn-withdraw" @click="btnSave">保存提现二维码</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/common/store';
	export default {
		data() {
			return {
				wxIncomeQrcodeUrl:null,
				wxIncomeQrcode:null,	//上传后保存路径
				
				picCode:'',		//图片验证码
				imgUrl:'',		//图片验证码路径
				t:'',
				
				phone:null,
				phoneValid:'',	//手机验证码
				isSend:false,
				captchaText:'获取验证码',
				pt:null,
				
				isDisabled:false		//是否可以保存
			};
		},
		onLoad(option){
			this.phone = this.$store.getters.GET_userInfo.phone;
			this._loadInfo();
			this.imgCaptcha();
		},
		methods:{
			_loadInfo(){
				const api = this.$request;
				const self = this;
				api.post(api.url.transferQrInfo,{},res=>{
					console.log(res)
					if(res.code==200){
						self.wxIncomeQrcodeUrl=res.body.qrcodeImg;
					}
				})
			},
			imgCaptcha(){
				this.t = new Date().getTime();
				let httpDomain = this.$store.getters.GET_httpDomain;
				let baseURL = this.$store.state.baseURL+'/api/v1/';
				this.imgUrl = httpDomain + baseURL + "verifyCode.jpeg?w=300&h=80&t="+this.t;
			},
			getCaptcha(){
				if(this.isSend)return;
				if(!this.phone){
					this.$utils.toast('请输入手机号');
					return
				}
				if(!this.picCode){
					this.$utils.toast('请输入图片验证码');
					return
				}
				const self = this;
				this.pt = parseInt('10'+ new Date().getTime())
				//获取手机验证码
				const api = this.$request;
				api.post(api.url.sendSMS,{
					phone:this.phone,
					code:this.picCode,
					pt:this.pt,
					t:this.t
				},res=>{
					console.log(res)
					if(res.code==200){
						this.isSend = true;
						let number = 60;
						let timer = setInterval(()=>{
							number--;
							self.captchaText = number +'s';
							if(number<=0){
								clearInterval(timer);
								self.isSend = false;
								self.captchaText = '获取验证码';
							}
						},1000)
					}else{
						uni.showToast({
							title:'图片验证码错误',
							icon:'error'
						})
					}
				})
			},
			btnSave(){
				if(!this.wxIncomeQrcode) {
					uni.showModal({
						title:'温馨提示',
						content:'请上传收款码',
						showCancel:false
					})
					return false;
				}
				if(!this.phoneValid) {
					uni.showModal({
						title:'温馨提示',
						content:'请填写手机验证码',
						showCancel:false
					})
					return false;
				}
				const api = this.$request;
				api.post(api.url.transferQrBind,{
					type: 1,  //1:微信二维码，2:支付宝二维码
					imgPath: this.wxIncomeQrcode,
					phoneValid: this.phoneValid,
					pt:this.pt,
				},res=>{
					console.log(res)
					if(res.code==200){
						uni.showModal({
							content:'保存成功',
							showCancel:false,
							success: (res) => {
								uni.navigateBack()
							}
						})
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						uni.showToast({
							title:'操作失败',
							icon:"error"
						});
					}
				})
			},
			uploadImg(){
				const api = this.$request;
				const _self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
				    success: (res) => {
						console.log(res);
						let imageSrc = res.tempFilePaths[0];	//使用本地路径
						let token = this.$store.getters.GET_userInfo.token;
						let httpDomain = this.$store.getters.GET_httpDomain;
						let baseURL = this.$store.state.baseURL+'/api/v1/';
						uni.uploadFile({
							url: httpDomain + baseURL + api.url.upLoadImgUser, 
							filePath: imageSrc,
							header:{"authorization": token},
							name: 'file',
							success: (uploadFileRes) => {
								const res = JSON.parse(uploadFileRes.data)	  
								console.log(res);
								if(res.code == 200){
									_self.wxIncomeQrcode = res.body.path;
									_self.wxIncomeQrcodeUrl = res.body.imgUrl;
									_self.imgCaptcha()
								}else if(res.msg){
									uni.showModal({
										content:res.msg,
										showCancel:false
									})
								}else{
									uni.showToast({
										title:'操作失败',
										icon:'error'
									})
								}
							}
						});
				    }
				});
			}
		}
	}
</script>

<style lang="less">
	.g-doc{ padding: 20rpx 14rpx 0;}
	.mod-wbg{ background: #fff; border-radius: 10rpx;}
	.mod{
		margin-bottom:40rpx;
		.tit{ padding: 20rpx 30rpx; font-size: 28rpx; color:#24211D;}
		.con{ padding: 30rpx;}
	}
	.uploadWrap{ width: 280rpx; height: 280rpx; background: #EEEEEE; line-height: 280rpx; text-align: center; color:#7E7C7A; font-size: 26rpx; margin: 0 auto;
		.upload{ position: relative; height: 100%;}
		image{ width: 100%; height: 100%; position: relative;}
	}
	.money{
		margin-bottom:25rpx; height: 108rpx; display: flex; align-items: center;border-bottom: 1rpx solid #E1DDDD; position: relative;
		&::before{ content:"￥"; position: absolute; left: 0; top: 23rpx; font-size: 50rpx; font-weight: bold;}
		
		input{ padding-left: 80rpx; font-size: 60rpx; font-weight: bold;}
		
	}
	
	.tip{ color:#9999AE; font-size: 26rpx; line-height: 39rpx; }
	.buttonArea{
		padding-top: 48rpx; text-align: center;
		.btn-withdraw{
			background:#ec7136;
			width: 80%;
			padding: 20rpx 0;
			margin: 0 auto 20rpx;
			color:#fff; 
			border-radius: 10rpx;
			text-align: center; 
			font-size: 30rpx;}
		.disabled{ background: #DDDCDC;}
		.otherWay{ color:#80809E;font-size: 24rpx; display: inline-block; border-bottom: 1rpx solid #80809E;}
	}
	
	
	.mask{ background: rgba(0,0,0,0.52); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1001;}
	.pop-confirm{ background: #fff; position: fixed; left: 0; bottom: 0; width: 100%; z-index: 1002; transform: translateY(100%); padding: 0 15rpx; transition: transform ease-out 0.2s; box-sizing: border-box;
		.pop-tit-ext{ text-align: center; height: 125rpx; border-bottom: 2rpx solid #F4F4F4; display: flex; flex-direction: column; justify-content: center; line-height: 40rpx;
			.tit{ font-size: 28rpx;}
			.subTip{font-size: 22rpx; color:#9A9AAF;}
		}
		.pop-tit{ text-align: center; height: 125rpx; border-bottom: 2rpx solid #F4F4F4; line-height: 125rpx; font-weight: bold;}
		.btn-comfirm{ font-size: 30rpx; color:#157EFB; position: absolute; right: 30rpx; top:0; font-weight: normal;}
		.item{ height: 125rpx; border-bottom: 2rpx solid #F4F4F4; padding-left:89rpx; font-size: 28rpx; position: relative; display: flex; flex-direction: column; justify-content: center; line-height: 40rpx;
			.tip{ font-size: 22rpx; color:#9A9AAF;}
			&:last-child{ border-bottom: none;}
			&.cur{ background: #eeeeee;}
		}
	}
	.show{transform: translateY(0);}
	.addForm{ background: #fff; border-radius: 10rpx 10rpx 0 0; position: relative; height: 100%; padding: 0 30rpx; display: flex; flex-direction: column;}
	.form{
		.item{ border-bottom: 1rpx solid #F3F3F3; height: 80rpx; display: flex; align-items: center;}
		input{ border: none; height: 80rpx; line-height: 80rpx; width: 100%; font-size: 28rpx; flex:1; }
		.key{ width: 147rpx; font-size: 28rpx;}
		.value{ display: flex; align-items: center;}
		.btn-getCaptcha{background:linear-gradient(90deg,#f4b349,#ec7136); color:#fff;font-size: 26rpx; width: 193rpx; height: 53rpx; line-height: 53rpx; text-align: center;}
		.imgCaptcha{font-size: 26rpx; width: 193rpx; height: 53rpx; line-height: 53rpx; text-align: center;}
		.disabled{ background: #D1D1D1;}
	}
</style>
